<?php

use yii\helpers\Html;
use yii\widgets\DetailView;

/* @var $this yii\web\View */
/* @var $model 商户信息 */
/* @var $list 数据列表 */

$this->title = $model->code.'-'.$model->shop;
$this->params['breadcrumbs'][] = ['label' => "门店在线记录", 'url' => ['index']];
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="shop-statistic">
    <div class="box-body bg-white">
        <p class="text-color-gray fw-400"><?=$list && $list[0]['date']?></p>
        <div class="chart">
            <canvas id="lineChart0" style="height:250px"></canvas>
        </div>
    </div>

    <div class="space20"></div>

    <div class="page-section">
        <?php for($i=1;$i<count($list);$i++){ ?>
        <div class="col-xs-12 col-sm-6 bg-white" style="margin-bottom: 20px;">
            <p class="text-color-gray fw-400" style="padding-top: 10px"><?=$list[$i]['date']?></p>
            <div class="chart">
                <canvas id="lineChart<?=$i?>" style="height:200px"></canvas>
            </div>
        </div>
        <?php } ?>

        <div style="clear: both"></div>
    </div>
</div>

<script src="/js/jquery-2.2.3.min.js"></script>
<script src="/js/Chart-4.4.4.min.js"></script>
<script>
    $(function () {
        const lables = <?=Yii::$app->params['timesForChartLabel']?>;

    <?php for($i=0;$i<count($list);$i++){ ?>
        const ctx<?=$i?> = document.getElementById('lineChart<?=$i?>');
        const data<?=$i?> = [<?=$list[$i]['counts']?>];

        new Chart(ctx<?=$i?>, {
            type: 'line',
            data: {
                labels: lables,
                datasets: [{
                    data: data<?=$i?>,
                    borderWidth: 2,
                    borderColor: '#7199A9',
                    pointRadius: 5, // 设置描点大小
                    pointBorderColor: '#7199A9', // 设置描边颜色
                    pointBorderWidth: 0,
                    pointBackgroundColor: data<?=$i?>.map(value => value < 10 ? '#F16567' : '#6AB24B')
                }]
            },
            options: {
                scales: {
                    x: {
                        ticks: {
                            callback: function(value, index) {
                                // 只在 index 为 0, 4, 8, ..., 24 的位置显示标签
                                return index % 4 === 0 ? this.getLabelForValue(value) : '';
                            },
                        }
                    },
                    y: {
                        beginAtZero: true,
                        max: 40
                    },
                },
                plugins: {
                    legend: false
                }
            },
        });
    <?php } ?>
    })
</script>
